<template>
  <div class="cro-img">
    <div class="cropper-content">
      <div class="cropper">
        <vue-cropper
          ref="cropper"
          :img="imgUrl"
          :outputSize="option.size"
          :outputType="option.outputType"
          :info="true"
          :full="option.full"
          :canMove="option.canMove"
          :canMoveBox="option.canMoveBox"
          :original="option.original"
          :autoCrop="option.autoCrop"
          :autoCropWidth="option.autoCropWidth"
          :autoCropHeight="option.autoCropHeight"
          :fixedBox="option.fixedBox"
          :maxImgSize="option.maxImgSize"
          :canScale="option.canScale"
        >
        </vue-cropper>
      </div>

    </div>
    <div class="footer-btn">
      <el-button class="btn" @click="rotateLeft">ocr识别</el-button>
      <el-button class="btn" @click="rotateLeft">↺ 左旋转</el-button>
      <el-button class="btn" @click="rotateRight">↻ 右旋转</el-button>
      <!--<el-button class="btn" @click="handleIntercept">截图ocr识别</el-button>
      <el-button class="btn" @click="down('blob')">上传截图</el-button>
      <el-button class="btn" @click="handleCansle">取消</el-button>-->
    </div>
  </div>
</template>

<script>
// import { VueCropper } from 'vue-cropper' // 该组件的地址   https://www.npmjs.com/package/vue-cropper/v/0.4.7

export default {
  name: 'cropperTemplate',
  comments: {
    // VueCropper
  },
  props: {
    imgUrl: {
      type: String
    }
  },
  data () {
    return {
      crap: false,
      previews: {},
      option: {
        size: 1,
        full: false, // 是否输出原图比例的截图
        outputType: 'jpeg', // 裁剪生成图片的格式
        canMove: true, // 图片是否可以移动
        original: true, // 图片按照原始比例渲染
        maxImgSize: 1000, // 限制图片最大宽度和高度
        canScale: true, // 图片是否允许滚轮缩放
        canMoveBox: true, // 截图框能否拖动
        autoCrop: false, // 是否默认生成截图框
        autoCropWidth: 200, // 默认生成截图框宽度
        autoCropHeight: 200, // 默认生成截图框高度
        fixedBox: false, // 固定截图框大小 不允许改变
        downImg: '#' //
      }
    }
  },
  mounted () {
  },
  methods: {
    // 向左旋转
    rotateLeft () {
      this.$refs.cropper.rotateLeft()
    },
    // 向右旋转
    rotateRight () {
      this.$refs.cropper.rotateRight()
    },
    handleIntercept () {
      // 开始截图
      this.option.autoCrop = true
    },
    handleCansle () {
      // 取消截图
      this.option.autoCrop = false
      this.$refs.cropper.clearCrop()
    },
    finish (type) { // 输出 生成图片
      if (type === 'blob') {
        this.$refs.cropper.getCropBlob((data) => {
          var img = window.URL.createObjectURL(data)
          this.model = true
          this.modelSrc = img
        })
      } else {
        this.$refs.cropper.getCropData((data) => {
          this.model = true
          this.modelSrc = data
        })
      }
    },
    down (type) {
      // event.preventDefault()
      console.log(this.$refs.cropper.getImgAxis()) // 获取图片基于容器的坐标点
      console.log(this.$refs.cropper.getCropAxis()) // 获取截图框基于容器的坐标点

      var aLink = document.createElement('a')
      aLink.download = 'author-img' // 输出
      if (type === 'blob') {
        this.$refs.cropper.getCropBlob((data) => {
          this.downImg = window.URL.createObjectURL(data)
          // aLink.download = this.downImg;
          aLink.href = window.URL.createObjectURL(data)
          aLink.click()
        })
      } else {
        this.$refs.cropper.getCropData((data) => {
          this.downImg = data
          aLink.href = data
          aLink.click()
        })
      }
      this.handleCansle()
    },
    uploadImg (e, num) { // 上传图片
      // this.option.img
      var file = e.target.files[0]
      if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
        alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
        return false
      }

      var reader = new FileReader()
      reader.onload = (e) => {
        let data
        if (typeof e.target.result === 'object') { // 把Array Buffer转化为blob 如果是base64不需要
          data = window.URL.createObjectURL(new Blob([e.target.result]))
        } else {
          data = e.target.result
        }
        if (num === 1) {
          this.option.img = data
        } else if (num === 2) {
          this.example2.img = data
        }
      } // 转化为base64
      reader.readAsDataURL(file) // 转化为blob reader.readAsArrayBuffer(file)
      this.$refs.cropper.clearCrop()
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "../../styles/mixin";

  .cro-img, .cropper-content, .cropper{
      height: 100%;
  }
  .cro-img{
    position: relative;
    .footer-btn{
      position: absolute;
      top:0;
      right: 0;
      z-index: 10;
      display: none;
      .btn{
        padding: 5px 8px;
        margin: 0 2px;
        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
      }
    }
    &:hover{
      .footer-btn{
        display: block;
      }
    }

  }
</style>
<style lang="scss">
  .cro-img{
    .cropper-content{
      .cropper{
        img{
          width: 100%;
        }
      }
    }
  }
</style>
